<template>
  <node-common
    title="知识库"
    iconName="knowledge-node"
    :isSelected="isSelected"
    :isHovered="isHovered"
    :model="model"
    :menus="menus"
    @handleMenu="handleMenu"
  >
    <div class="content">
      <div class="node-key-value">
        <div class="node-key-value-item">
          <div class="node-key-value-item-key" style="width: 58px"><span>查询变量</span></div>
          <div class="node-key-value-item-value">
            <span v-if="getInputParams.length > 0">{{ getInputParams }}</span>
            <span v-else style="color: red">尚未选择</span>
          </div>
        </div>
        <div class="node-key-value-item">
          <div class="node-key-value-item-key" style="width: 58px"><span>知识库</span></div>
          <div class="node-key-value-item-value">
            <span>{{ getKnowledge }}</span>
          </div>
        </div>
        <div class="node-key-value-item">
          <div class="node-key-value-item-key" style="width: 58px"><span>输出参数</span></div>
          <div class="node-key-value-item-value">
            <span>{{ getOutputParams }}</span>
          </div>
        </div>
        <div class="ellipsis" style="font-size: 12px; color: #666">{{ getRemarks }}</div>
      </div>
    </div>
  </node-common>
</template>

<script setup>
import { ref, onMounted, reactive, watch, computed } from 'vue';
import NodeCommon from '../base-node.vue';
import { KnowledgeApi } from '@/views/super/airag/aiknowledge/api/KnowledgeApi';
const props = defineProps({
  model: {
    type: Object,
    default: () => ({})
  },
  
   graphModel: {
    type: Object,
    default: () => ({})
  },
  properties: {
    type: Object,
    default: null
  },
  isHovered: {
    type: Boolean,
    default: false
  },
  isSelected: {
    type: Boolean,
    default: false
  }
});
const menus = ref([{ name: '删除', key: 'delete', color: '#fb363f' }]);
const inputNodes = ref([
  { field: 'content', nodeId: 'start-node', name: '开始 / 用户问题' },
  { field: 'history', nodeId: 'start-node', name: '开始 / 历史记录' }
]);

const selectKnowledgeList = ref([]);
const handleMenu = item => {
 if (item.key === 'delete') {
    props.graphModel.deleteNode(props.model.id)
  }
};
const getInputParams = computed(() => {
  var node = inputNodes.value.find(
    item => item.nodeId === props.properties?.inputParams[0]?.nodeId && item.field === props.properties?.inputParams[0]?.field
  );
  if (node) {
    return node.name;
  }
  return '';
});
const getOutputParams = computed(() => {
  return props.properties?.outputParams?.map(item => item.name).join(',');
});
const getKnowledge = computed(() => {
  const idSet = new Set(props.properties.options.knowIds);
  return selectKnowledgeList.value
    .filter(item => idSet.has(String(item.id)))
    .map(item => item.name)
    .join(',');
});
const getSelectKnowledgeList = () => {
  let params = {
    pageNo: 0,
    pageSize: 1000,
    column: 'createTime',
    order: 'desc'
  };
  KnowledgeApi.list(params).then(res => {
    if (res.success) {
      // const idSet = new Set(props.properties.options.knowIds);
      // selectKnowledgeList.value = res.data.records.filter(item => idSet.has(String(item.id)));
      selectKnowledgeList.value = res.data.records;
    } else {
      selectKnowledgeList.value = [];
    }
  });
};
const getRemarks = computed(() => {
  return props.properties?.remarks;
});
onMounted(() => {
  getSelectKnowledgeList();
});

// watch(
//   () => props.nodeData,
//   nodeDataChange => {
//     console.log('nodeDataChange');
//     var nodes = getPreNodes(props.nodeData, props.lf.graphModel);
//     prevNodes.value = nodes;
//     getSelectKnowledgeList();
//   },
//   {
//     immediate: true
//   }
// );
</script>
<style  lang='less' scoped>
.node-key-value {
  display: flex;
  flex-direction: column;
}
.node-key-value-item {
  display: flex;
  flex-direction: row;
}
.node-key-value-item-key {
  color: #999;
  text-align: right;
  margin-right: 8px;
}
.node-key-value-item-value {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-iconify {
  display: inline-block;
}
.anticon {
  display: inline-flex;
  align-items: center;
  color: inherit;
  font-style: normal;
  line-height: 0;
  text-align: center;
  text-transform: none;
  vertical-align: -0.125em;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ellipsis {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
</style>